import { useForm } from "../../framework/common/context/metadata-context";
import "./index.css";
export default function () {
  const { data: tplData } = useForm();

  if (tplData.ProcessInfo) {
    var html = "",
      archiveName = "已归档",
      invalidName = "已作废",
      fontSize = [22, 22, 18, 18, 16, 14, 12];

    tplData.flowOperationNameMap &&
      tplData.flowOperationNameMap.forEach(function (item) {
        if (item.eventName == "Book" && item.operationName != "归档") {
          archiveName = item.operationName;
        }
        if (item.eventName == "Cancel" && item.operationName != "作废") {
          invalidName = item.operationName;
        }
      });
    // 显示加急图标
    if (tplData.ProcessInfo.ProcessLevel == 1) {
      html += '<img class="jiaji" src="/frontend/build/images/jiaji.png" alt="">';
    }
    // 显示归档图标
    if (tplData.ProcessInfo.ProcessStatus == 2) {
      html +=
        '<span class="iconWrap"><img class="archive" src="/frontend/build/images/pass.png" alt=""><span class="pass" style="font-size:' +
        fontSize[archiveName.length] +
        'px">' +
        archiveName +
        "</span></span>";
    }
    // 显示作废图标
    if (tplData.ProcessInfo.ProcessStatus == -2) {
      html +=
        '<span class="iconWrap"><img class="invalid" src="/frontend/build/images/invalid.png" alt=""><span class="invalid" style="font-size:' +
        fontSize[invalidName.length] +
        'px">' +
        invalidName +
        "</span></span>";
    }
  }
  return html ? (
    <div className="statusIconWrap" dangerouslySetInnerHTML={{__html:html}}></div>) : null;
}
